import React, { memo, useDeferredValue, useState, useTransition } from "react"
import nameArray from "./nameArray"

const App = memo(() => {
    const [nameList, setNameList] = useState(nameArray)
    const deferredValueList = useDeferredValue(nameList)

    function valueChange(e) {
        setNameList(nameArray.filter((item) => item.includes(e.target.value)))
    }

    return (
        <div>
            <input type="text" onInput={valueChange} />
            <ul>用户列表：</ul>
            {deferredValueList.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </div>
    )
})

export default App
